<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算机科技协会</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="big_box">
    <div class="header_box">
        <div class="header">
            <div class="photo">
                <img src="image/logo_03.png">
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li>
                        <a href="#">社团</a>
                        <!--<ul class="drop">-->
                        <!--<div>-->
                        <!--<li>程序设计基础协会</li>-->
                        <!--<li>ACM设计协会</li>-->
                        <!--<li>不甘社</li>-->
                        <!--<li>微开发</li>-->
                        <!--</div>-->
                        <!--</ul>-->
                    </li>
                    <li><a href="#">作品</a></li>
                    <li><a href="#">新闻</a></li>
                    <li><a href="#">关于我们</a></li>
                </ul>
            </div>
        </div>
        <div class="center">
            <div class="content">
                <img src="image/home_slide_01.jpg">
                <div class="logo">
                    <img src="image/logo_without_text.png">
                </div>
            </div>
        </div>
    </div>
    <div class="middle_box">
        <div class="intro">
            <h1>我们的社团</h1>
            <div class="container">
                <a href="#">
                    <div class="box">
                        <div class="box_content">
                            <h2>程序设计基础协会</h2>
                            <p>作为科协里最具影响力的协会之一，主要任务是传授成员编程的基础知识和基础算法，培养成员编程兴趣提高成员编程质量</p>
                        </div>
                        <div class="pho">
                            <img src="image/acm_logo.png">
                        </div>
                    </div>
                </a>
                <a href="#">
                    <div class="box">
                        <div class="box_content">
                            <h2>ACM设计协会</h2>
                            <p>作为科协里最具影响力的协会之一，主要任务是传授成员编程的基础知识和基础算法，培养成员编程兴趣提高成员编程质量</p>
                        </div>
                        <div class="pho">
                            <img src="image/acm_logo.png">
                        </div>
                    </div>
                </a>
                <a href="#">
                    <div class="box">
                        <div class="box_content">
                            <h2>不甘社</h2>
                            <p>作为科协里最具影响力的协会之一，主要任务是传授成员编程的基础知识和基础算法，培养成员编程兴趣提高成员编程质量</p>
                        </div>
                        <div class="pho">
                            <img src="image/bgs_logo.jpg">
                        </div>
                    </div>
                </a>
                <a href="#">
                    <div class="box">
                        <div class="box_content">
                            <h2>微开发</h2>
                            <p>作为科协里最具影响力的协会之一，主要任务是传授成员编程的基础知识和基础算法，培养成员编程兴趣提高成员编程质量</p>
                        </div>
                        <div class="pho">
                            <img src="image/wkf_logo.jpg">
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="works_box">
        <div class="w_intro">
            <h2>点到系统</h2>
            <a href="#">
                <div class="works">
                    <img src="image/works_01.jpg">
                </div>
                <div class="introduce">
                    <p>当学生输入验证码签到后，网络会被自动屏蔽，90分钟后才会自动开启，以防止学生上课玩手机</p>
                </div>
            </a>
        </div>
    </div>
    <div class="footer_box">
        <div class="f_intro">
            <h2>了解我们，加入我们</h2>
            <div class="f_contain">
                <div class="small_box">
                    <div>
                        <img src="image/warm.png">
                    </div>
                    <h3>热情</h3>
                    <p>我们的社团很热情，反正就是很热情。。不管怎么样都是很热情</p>
                </div>
                <div class="small_box">
                    <div>
                        <img src="image/tec.jpg">
                    </div>
                    <h3>技术</h3>
                    <p>技术大牛都在这里了喂，快来快来。带你装逼带你飞</p>
                </div>
                <div class="small_box">
                    <div>
                        <img src="image/team.jpg">
                    </div>
                    <h3>团队</h3>
                    <p>我们有很好的技术团队，不甘社，微开发。带你做项目带你走向人生巅峰</p>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom_box">
        <div class="bottom_content">
            <div class="left">
                <div>
                    <img src="image/logo_without_text.png">
                </div>
                <p>版权所有：北京理工大学珠海学院计算机科技协会</p>
            </div>
            <div class="right">
                <div class="qt">
                    <div>
                        <img src="image/wechat_qt_code.jpg">
                    </div>
                    <p>计算机科技协会服务号</p>
                </div>
                <div class="qt">
                    <div>
                        <img src="image/qq_qt_code.jpg">
                    </div>
                    <p>2016级程序设计协会QQ群</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>